<template>
  <div class="app-container">
    <el-container>
      <el-main>

        <el-form ref="form" class="custom-form" style="display:flex;  justify-content: space-between;  flex-wrap: wrap;" :model="getpage" label-width="80px">
          <el-form-item label="取件任务编号:">
            <el-input v-model="getpage.id" style="width: 250px; margin-left: 30px;" placeholder="请输入取件任务编号" />
          </el-form-item>
          <el-form-item label="订单编号:">
            <el-input v-model="getpage.orderId" style="width: 250px;" placeholder="请输入订单编号" />
          </el-form-item>
          <el-form-item label="所属营业部：" class="no-wrap-text">
            <el-cascader
              :options="treeData"
              :props="defaultProps"
              clearable
              expand-trigger="hover"
              placeholder="请选择所属营业部"
              style="width: 250px; margin-left: 20px;"
              @change="handleNodeClick"
            />
          </el-form-item>
          <el-form-item label="预计完成时间">
            <el-date-picker
              v-model="getpage.minEstimatedEndTime"

              style="width: 250px; margin-left: 30px;"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']"
            />

          </el-form-item>
          <el-form-item label="实际完成时间：">
            <el-date-picker

              v-model="getpage.maxActualEndTime"
              style="width: 250px; margin-left: 40px;"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']"
            />

          </el-form-item>
          <el-form-item label="任务分配状态:" class="no-wrap-text">
            <el-select v-model="getpage.assignedStatus" placeholder="请选择" style="width: 300px; margin-left:20px;">
              <el-option label="已分配" value="2" />
              <el-option label="待人工分配" value="3" />

            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="danger" @click="searchList">搜索</el-button>
            <el-button @click="resetForm">重置</el-button>

          </el-form-item>

        </el-form>
      </el-main>

    </el-container>
    <el-tabs v-model="activeName" class="custom-tabs" type="border-card" @tab-click="handleClick">
      <el-button type="danger" @click="searchList9">人工分配</el-button>
      <el-tab-pane label="全部" name="first">全部
        <el-table
          :fit="true"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="55"
          >
            <template>
              <el-checkbox :disabled="true" />
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="取件任务编号"
            width="180"
          />
          <el-table-column
            width="180"

            prop="agencyName"
            label="所在营业部"
          />
          <el-table-column
            width="180"

            prop="courierName"
            label="快递员姓名"
          />

          <el-table-column
            prop="orderId"
            label="订单编号"
            width="180"
          >
            <!-- <template v-slot="{row}">
              <span v-if="row.status===1">待提货</span>
              <span v-else-if="row.status===2">进行中</span>
              <span v-else-if="row.status===3">已完成</span>
              <span v-else>已取消</span>
            </template> -->

          </el-table-column>
          <el-table-column
            prop="estimatedStartTime"
            label="预计开始时间"
            width="180"
          >
            <!-- <template v-slot="{row}">
              <span v-if="row.loadingStatus===1">半载</span>
              <span v-else-if="row.loadingStatus===2">满载</span>
              <span v-else-if="row.loadingStatus===3">空载</span>

            </template> -->
          </el-table-column>
          <el-table-column
            prop="estimatedEndTime"
            label="预计完成时间"
            width="180"
          />
          <el-table-column
            prop="actualEndTime"
            label="实际完成时间"
            width="180"
          />

        </el-table>
        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination
            :current-page="getpage.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="getpage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="新任务" name="second">全部
        <el-table
          :fit="true"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="55"
          >
            <el-checkbox :disabled="true" />

          </el-table-column>
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="取件任务编号"
            width="180"
          />
          <el-table-column
            width="180"

            prop="agencyName"
            label="所在营业部"
          />
          <el-table-column
            width="180"

            prop="courierName"
            label="快递员姓名"
          />

          <el-table-column
            prop="orderId"
            label="订单编号"
            width="180"
          >
            <!-- <template v-slot="{row}">
              <span v-if="row.status===1">待提货</span>
              <span v-else-if="row.status===2">进行中</span>
              <span v-else-if="row.status===3">已完成</span>
              <span v-else>已取消</span>
            </template> -->

          </el-table-column>
          <el-table-column
            prop="estimatedStartTime"
            label="预计开始时间"
            width="180"
          >
            <!-- <template v-slot="{row}">
              <span v-if="row.loadingStatus===1">半载</span>
              <span v-else-if="row.loadingStatus===2">满载</span>
              <span v-else-if="row.loadingStatus===3">空载</span>

            </template> -->
          </el-table-column>
          <el-table-column
            prop="estimatedEndTime"
            label="预计完成时间"
            width="180"
          />
          <el-table-column
            prop="actualEndTime"
            label="实际完成时间"
            width="180"
          />

        </el-table>
        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination
            :current-page="getpage.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="getpage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="已完成" name="third">全部
        <el-table
          :fit="true"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="55"
          >
            <el-checkbox :disabled="true" />

          </el-table-column>
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="取件任务编号"
            width="180"
          />
          <el-table-column
            width="180"

            prop="agencyName"
            label="所在营业部"
          />
          <el-table-column
            width="180"

            prop="courierName"
            label="快递员姓名"
          />

          <el-table-column
            prop="orderId"
            label="订单编号"
            width="180"
          >
            <!-- <template v-slot="{row}">
              <span v-if="row.status===1">待提货</span>
              <span v-else-if="row.status===2">进行中</span>
              <span v-else-if="row.status===3">已完成</span>
              <span v-else>已取消</span>
            </template> -->

          </el-table-column>
          <el-table-column
            prop="estimatedStartTime"
            label="预计开始时间"
            width="180"
          >
            <!-- <template v-slot="{row}">
              <span v-if="row.loadingStatus===1">半载</span>
              <span v-else-if="row.loadingStatus===2">满载</span>
              <span v-else-if="row.loadingStatus===3">空载</span>

            </template> -->
          </el-table-column>
          <el-table-column
            prop="estimatedEndTime"
            label="预计完成时间"
            width="180"
          />
          <el-table-column
            prop="actualEndTime"
            label="实际完成时间"
            width="180"
          />

        </el-table>
        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination
            :current-page="getpage.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="getpage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import { treeList } from '@/api/task.js'
import { getpickup } from '@/api/pick.js'
import { transListToTreeData } from '@/utils/index'
export default {
  data() {
    return {
      defaultProps: {
        label: 'name',
        value: 'id'
      },
      total: null,
      activeName: 'first',
      treeData: [],
      tableData: [],
      getpage: {
        // agencyId: null,
        // assignedStatus: '1',
        // id: null,

        // maxActualEndTime: '',
        // maxEstimatedEndTime: '',
        // minActualEndTime: '',
        // minEstimatedEndTime: '',
        // orderId: null,
        page: 1,
        pageSize: 10,

        status: null,
        taskType: '2'
      }
    }
  },
  created() {
    this.treeList()
    this.getpickup()
  },
  methods: {
    searchList9() {
      this.$message.error('选择要分配的作业')
    },

    handleClick(tab) {
      if (tab.name === 'first') {
        this.getpage.status = null

        this.getpickup()
      } else if (tab.name === 'second') {
        // 待提货筛选
        this.getpage.status = 1
        this.getpickup()
      } else if (tab.name === 'third') {
        // 进行中
        this.getpage.status = 2
        this.getpickup()
      }
    },

    // 获取取派件分页
    async getpickup() {
      const res = await getpickup(this.getpage)

      this.tableData = res.items
      this.total = Number(res.counts)
    },
    handleNodeClick(value) {
      this.getpage.agencyId = value[value[length - 1]]
    },
    // 切换页码
    handleCurrentChange(num) {
      this.getpage.page = num
      this.getpickup()
    },
    // 获取树状
    async treeList() {
      const msg = await treeList()
      this.treeData = transListToTreeData(JSON.parse(msg), '0')
    },
    // 发起搜索
    searchList() {
      this.getpickup()
    },
    // 点击重置
    resetForm() {
      this.getpage = {
        // agencyId: null,
        // assignedStatus: '1',
        // id: null,

        // maxActualEndTime: '',
        // maxEstimatedEndTime: '',
        // minActualEndTime: '',
        // minEstimatedEndTime: '',
        // orderId: null,
        page: 1,
        pageSize: 10,

        status: '2',
        taskType: '1'
      }
      this.getpickup()
    }
  }
}
</script>

<style>
.custom-tab .el-tabs__item:not(.is-active) {
  background-color: #ffeeeb;
  color: red;
}

.custom-tab .el-tabs__item.is-active {
  background-color: white;
  color: red;
}
.custom-form .el-form-item__label {
  white-space: nowrap;
}
.customclass{
  width: 500px!important;
}

.no-wrap-text .el-form-item__label {
  white-space: nowrap;
}
.custom-tabs{
  margin-top: 25px;
  background-color: #ffffff;

}
.custom-tabs .el-tabs__header{
  background-color: #ffffff;
  border: none;

}
.custom-tabs .el-tabs__item{
  border-color: #ffeeeb;
}
.custom-tabs .el-tab-pane{
  margin-top: 25px;
  background-color: #ffffff;

}
.custom-tabs .el-tab-pane:focus{
  background-color: #ffeeeb !important;
  color: #fff;
}

  .el-main {
    background-color: #ffffff;
    color: #333;
    /* text-align: center; */
    /* line-height: 160px; */
    margin-top: 25px;

  }

  body > .el-container {
    margin-bottom: 40px;
  }
</style>
